<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../lib/layui/css/layui.css" media="all">
  <link href="../../../lib/wangeditor/style.css" rel="stylesheet">
  <link href="../../../css/layout.css" rel="stylesheet">
  <link rel="stylesheet" href="../../../css/public.css" media="all">
  <style>
      body {
          background-color: #ffffff;
      }
  </style>
</head>
<body>
<div class="layui-form layuimini-form" id="myForm">
  <div class="layui-form-item">
    <label class="layui-form-label required">名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" placeholder="请输入" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <textarea name="description" placeholder="请输入" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <input type="text" name="href" lay-verify="required" placeholder="请输入" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">是否显示</label>
    <div class="layui-input-block">
      <input type="checkbox" name="showFlag" lay-skin="switch" lay-filter="topFlag" lay-text="是|否">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">背景图片</label>
    <div class="layui-input-block">
      <button type="button" class="layui-btn" id="upload-btn">
        <i class="layui-icon layui-icon-upload"></i> 背景上传
      </button>
      <div style="width: 132px;">
        <div class="layui-upload-list">
          <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
          <div id="ID-upload-demo-text"></div>
        </div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
          <div class="layui-progress-bar" lay-percent=""></div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
      <input type="number" name="order" lay-verify="required" placeholder="请输入" value="" class="layui-input">
    </div>
  </div>

  <hr />

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">添加</button>
    </div>
  </div>
</div>

<script src="../../../lib/layui/layui.js" charset="utf-8"></script>
<script src="../../../lib/wangeditor/index.js"></script>
<script src="../../../api/common.js" charset="utf-8"></script>

<script>
  layui.use(['form', 'laydate'], function () {
    var form = layui.form,
      layer = layui.layer,
      laydate = layui.laydate;
    $ = layui.$;
    var fileList = []
    var upload = layui.upload;
    var element = layui.element;
    var fileId = ''

    laydate.render({
      elem: '#createDate',
      type: 'datetime',
      fullPanel: true // 2.8+
    });


    var uploadInst = upload.render({
      elem: '#upload-btn',
      url: local + 'attachment/upload',
      data: {
        objType: 1,
      },
      headers: {
        'Authorization': `Bearer ${ localStorage.getItem("token") }`,
      },
      before: function(obj){
        // 预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
        });

        element.progress('filter-demo', '0%'); // 进度条复位
        layer.msg('上传中', {icon: 16, time: 0});
      },
      done: function(res){
        console.log('res',res)
        // 若上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        if(res.errno == 0){
          fileId = res.data.attrId
        }
        $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
      },
      error: function(){
        // 演示失败状态，并实现重传
        var demoText = $('#ID-upload-demo-text');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      },
      // 进度条
      progress: function(n, elem, e){
        element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
        if(n == 100){
          layer.msg('上传完毕', {icon: 1});
        }
      }
    });

    //监听提交
    form.on('submit(saveBtn)', function (data) {
      var obj = data.field
      obj.fileId = fileId
      obj.status = 2


      // obj.topFlag = obj.topFlag === 'on'

      // console.log('html', editor.getHtml())

      if(obj.showFlag){
        obj.showFlag = true
      }else{
        obj.showFlag = false
      }
      console.log('obj', obj)
      $.ajax({
        type: 'POST',
        url: local + 'spweb/insert',
        data: JSON.stringify(obj),
        dataType: "json",
        headers: {
          'Authorization': `Bearer ${ localStorage.getItem("token") }`,
        },
        contentType: 'application/json;charset=UTF-8',
        success: function (res) {//res为相应体,function为回调函数
          console.log('data', res)
          if (res.code === 200) {
            // layer.alert('添加成功');
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
            parent.layui.table.reload('currentTableId');
            return false;
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          layer.alert('操作失败！！！' + XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + textStatus, {icon: 5});
        }
      });
    });


  });
</script>
</body>
</html>
